div, input { box-sizing: border-box; }

html {
    height: 100%;
}

body {
    height: 100%;
    padding: 0; /* Override */
    display: flex;
    flex-direction: column;
    margin-left: 1px; // VS Code Webview splitter eats an extra pixel on the left.
}

a {
    text-decoration: none;
    &:hover { text-decoration: underline; }
}

::placeholder {
    color: var(--vscode-input-placeholderForeground);
}

mark {
    color: unset;
    background: var(--vscode-editor-findMatchHighlightBackground);
}

*:focus {
    outline: 1px solid var(--vscode-focusBorder) !important; // Override VS Code defaultStyles which are not self-consistent.
    outline-offset: -1px;
}

// ^^ Move to index.html ^^

#root {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.flexFill { flex: 1 1 }

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.svZeroData {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    & > * + * { margin-top: 16px; }

    & > div {
        color: var(--vscode-button-foreground);
        background: var(--vscode-button-background);
        width: 200px;
        padding: 4px;
        line-height: 1.4em;
        text-align: center;
        cursor: pointer;
    }
}

.svListPane {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .svTable {
        flex: 1 1;
    }
}

.svListHeader {
    display: flex;
    align-items: center;
    padding-right: 8px;

    .codicon {
        flex: 0 0 35px;
        line-height: 35px;
        cursor: pointer;
        // &:hover { background-color: var(--vscode-list-hoverBackground); }
    }

    .svFilterCombo {
        flex: 0 1 250px;
        height: 22px;
        margin-right: 8px;
        display: grid;
        & > * { grid-area: 1/1; }

        input {
            background-color: var(--vscode-input-background);
            color: var(--vscode-input-foreground);
            border: none;
            padding: 4px 5px;
            font-size: 12px;
            overflow: hidden;
        }

        .codicon {
            justify-self: end;
            line-height: 22px;
            width: 30px;
            margin: 1px; // Allow parent outline to show.
            background-color: var(--vscode-input-background); // Incase of overlap
        }
    }
}

.svListItem {
    line-height: 22px;
    cursor: pointer;
}

.svSecondary {
    // VS Code has 0.7 here but 0.6 in other places.
    // Opacity causing z-order issues with position: sticky, so using manually calced color.
    // Need to solve calc relative to theme.
    color: rgb(139, 139, 139);
}

.svLogsPane {
    overflow-y: auto;
    
    .svListItem {
        padding: 0 22px;
        display: flex;
        align-items: center;
        white-space: nowrap;
        cursor: default;
        & > * + * {
            margin-left: 6px;
        }

        & > :nth-child(2) {
            flex: 1 1 auto;
        }

        .codicon {
            cursor: pointer;
        }
    }
}

.svResizer {
    flex: 0 0 auto;
    background-color: var(--vscode-editorGroup-border);
    height: 1px;
    position: relative; // For handle.
}

.svMarkDown {
    & > :first-child {
        margin-top: 0;
    }

    & > :last-child {
        margin-bottom: 0;
    }
}
